<script setup lang='ts'>
  import { reactive, ref, nextTick } from 'vue';
  import theme from '@/utils/theme'
  import xmimg from '@/components/xmimg.vue';
  import exclusiveGift from './components/exclusiveGift.vue';
  import WeeklyList from './components/WeeklyList.vue';
  import firstUser from './components/firstUser.vue';
  import rule from './components/rule.vue';
  const listRef = ref();
  const action = reactive({
    tabType:0,
  })
  const tablist = [
    {type:0,font:'本期周星'},
    {type:1,font:'上期周星'},
    {type:3,font:'活动规则'}
  ]
  const handleTab = (item:any)=>{
    if(action.tabType == item.type) return
    action.tabType = item.type
    if(item.type < 3) {
      nextTick(()=>{
        listRef.value.handleGetList(action.tabType)
      })
    }
  }
</script>

<template>
  <div class="content">
    <div class="banner">
      <xmimg :src="theme.bannerimg" />
      <div class="tablist flex-align">
        <div
          v-for="item of tablist"
          :key="item.type"
          :class="['tabBut',action.tabType == item.type?'select':'']"
          @click="handleTab(item)">
          {{ item.font }}
        </div>
      </div>
    </div>
    <div class="main">
      <template v-if="action.tabType != 3">
        <exclusive-gift :pagetype="action.tabType" />
        <weekly-list ref="listRef" />
      </template>
      <rule v-if="action.tabType == 3" />
    </div>
    <first-user v-if="action.tabType == 0" />
  </div>

</template>

<style lang='scss' scoped>
  .content {
    height: max-content;
    padding-bottom: 70px;
    box-sizing: border-box;
    background: $contentBack;
    .main {
      padding: 0 16px;
    }
    .banner {
      position: relative;
      width: 100%;
      height: 305px;
      margin-bottom: 14px;
      .tablist {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 343px;
        height: 44px;
        padding: 4px 4px 0;
        box-sizing: border-box;
        background: $tabBackColor;
        border-radius: 33px;
        border: 1px solid $tabBorderColor;
        .tabBut {
          width: 109px;
          height: 40px;
          line-height: 37px;
          font-size: 14px;
          font-weight: 500;
          color: $tabFontColor;
          text-align: center;
          margin-right: 4px;
          transition: color .28s;
        }
        .tabBut:nth-last-child(1) {
          margin-right: 0;
        }
        .select {
          color: $tabSelectFontColor;
          background: url($tabButBack) left top / 100% 100% no-repeat;
        }
      }
    }
  }
</style>